/* 穿透样式，修改表头行背景 */
::v-deep .uni-table-tr .uni-table-th {
  background-color:#F0F6FF;
  color: #2f4b99;
}

/* 可选：修改表头单元格文字样式 */
::v-deep .uni-table-td {
  // border-bottom: none;
}
.tabs-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  height: 44px;
  background: #fff;
  margin: 10px;

  :deep(.u-tabs) {
    width: 100% !important;

    .u-tabs__wrapper__nav__item {
      flex: 1 !important;
    }

    .u-tabs__wrapper__nav__item__text {
      white-space: nowrap;
    }
  }
}

.order-search {
  display: flex;
  background-color: #fff;
  margin: 10px 10px 0;
  padding: 12px 145px 12px 20px;
  box-sizing: border-box;
  align-items: center;

  :deep(button) {
    width: 74px;
    height: 38px;
    margin-left: 11px;
    border-radius: 100px;
  }

  :deep(.uni-date) {
    margin-right: 10px;
  }
  :deep(.icon-calendar ){
    margin-left: 10px !important;
  }
  :deep(.uni-date__x-input){
  height: 32px !important;
  line-height: 32px !important;
  }
 :deep(.range-separator){
    height: 32px !important;
    line-height: 32px !important;
  }
  :deep(.uni-date-x--border) {
    border-radius: 100px !important;
  }

  :deep(.uni-date-x) {
    border-radius: 100px !important;
  }
}

.order-wrapper {
     margin: 10px 10px 0;
  display: flex;
  flex: 1;
  overflow: hidden;
  .order-con {
    background: #fff;
    border-radius: 10px;
    padding: 13px 10px 11px 11px;
    box-sizing: border-box;
    margin-bottom: 10px;

    .order-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;

      .order-status {
        font-weight: 500;
        font-size: 12px;
        color: #ff4134;
        line-height: 17px;
      }

      .order-info {
        display: flex;
        align-items: center;
        .pickup{
          padding: 0 4rpx;
          font-weight: 500;
          font-size: 12px;
          color: #0F90FD;
          border-radius: 4px;
          background: rgba(15, 144, 253, 0.1);
          line-height: 17px;
        }
        .takeout{
           padding: 0 4rpx;
           border-radius: 4px;
           font-weight: 500;
           font-size: 12px;
           color: #FD740F;
           background: rgba(253, 116, 15, 0.1);
           line-height: 17px;
        }

        .meals {
          font-weight: 500;
          font-size: 12px;
          color: #333333;
          line-height: 17px;
          margin-left: 5px;
        }

        .meals-num {
          font-weight: 500;
          font-size: 16px;
          color: #0f90fd;
          line-height: 22px;
        }
      }
    }

    .order-name {
      font-weight: 400;
      font-size: 12px;
      color: #666666;
      line-height: 20px;
    }

    .order-bot {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;

      .order-price {
        font-weight: 500;
        font-size: 14px;
        color: #ff5800;
        line-height: 20px;
      }
    }
  }
  .order-con.active{
    background: #ECF6FF;
    border: 1px solid #0F90FD;
  }
  .order-detail-wrapper {
    background-color: #fff;
    margin-right:10px;
    width: 62%;
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .order-detail {
      .order-tit {
        padding: 9px 0 6px 10px;
        box-sizing: border-box;
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
      }
    }

    .detail-list {
      padding: 0 10px;
      box-sizing: border-box;

      .list-item {
        padding: 16px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #ececec;
      }
      .list-ite{
        display: flex;
         align-items: center;
      }

      .item-menu {
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
        margin-left: 19px;
        margin-right: 8px;
      }

      image {
        width: 60px;
        height: 60px;
        margin-right: 11px;
      }

      .detail-info {
        flex: 1;
      }

      .detail-top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;

        .name {
          font-weight: 500;
          font-size: 14px;
          color: #333333;
          line-height: 20px;
        }

        .parice {
          font-weight: 500;
          font-size: 14px;
          color: #ff5800;
          line-height: 20px;
        }
      }

      .detail-bot {
        display: flex;
        justify-content: space-between;

        .info {
          font-weight: 400;
          font-size: 12px;
          color: #999999;
          line-height: 17px;
        }

        .num {
          font-weight: 400;
          font-size: 11px;
          color: #333333;
          line-height: 16px;
        }
      }
    }
    .detail-refound{
      justify-content: flex-end;
      display: flex;
      font-weight: 500;
      font-size: 13px;
      color: #FF9500;
      line-height: 22px;
      .info{
        margin-right:10px
      }
    }

    .detail-foot {
      width: 100%;
      background: #ffffff;
      box-shadow: 0px -2px 4px 0px rgba(51, 70, 129, 0.1);
      border-radius: 10px;
      height: 54px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0px 0 20px;
      box-sizing: border-box;

      .sum {
        font-weight: 500;
        font-size: 12px;
        color: #333333;
        line-height: 17px;
      }

      .pri {
        font-weight: 500;
        font-size: 16px;
        color: #ff5800;
        line-height: 22px;
      }
      .foot-btn {
        display: flex;
      }
    }
  }
}

.order-btn {
  border-radius: 8px;
  border: 1px solid #ff4134;
  font-weight: 500;
  font-size: 12px;
  color: #ff4134;
  padding: 4px 9px;
  box-sizing: border-box;
}

.status1 {
  background-color: #26b5b6;
  color: #fff;
  border: none;
}

.status2 {
  background-color: #0f90fd;
  color: #fff;
  border: none;
}

.status3 {
  border: 1px solid #ff7a00;
  color: #ff7a00;
  padding: 4px 20px;
}
.status4 {
  border: 1px solid #0f90fd;
  color: #0f90fd;
  background: transparent;
}
.status5 {
  background: #eeeeee;
  color: #333333;
  border: none;
}
.floating-button{
  position: fixed;
  left: 28%;
  bottom: 15vh;
  image{
    width:56px;
    height:56px
  }
}
.order-tip-wrapper{
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  background: #fff;
  image{
    width:14px;
    height:14px;
  }
  text{
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    margin-left: 5px;

  }
}
